<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>02_案例练习</title>
        <style>
            input {
                outline: none;
            }
        </style>
    </head>
    <body>
        <input type="text" placeholder="请输入歌曲名字">

        <script>
            var inp = document.querySelector('input');

            inp.onkeyup = function(e){
                if(e.keyCode == 13){
                    var songName = this.value;
                    if(songName.trim()){
                        var li = document.createElement('li');
                        li.innerHTML = songName;

                        li.onmouseenter = function(){
                            this.style.backgroundColor = 'tomato';
                        }

                        li.onmouseleave = function(){
                            this.style.backgroundColor = '';
                        }


                        var ul = document.createElement('ul');
                        ul.append(li);

                        document.body.append(ul);
                        this.value = '';


                        // 以下代码有一个问题 就是每当新添加一个歌曲 那么for
                        // 循环就会执行一次 效率比较低
                        // var li_list =document.querySelectorAll('li');
                        // for(var i = 0; i < li_list.length; i++){
                        //     li_list[i].onmouseenter = function(){
                        //         this.style.backgroundColor = 'skyblue';
                        //     }
                        //     li_list[i].onmouseleave = function(){
                        //         this.style.backgroundColor = '';
                        //     }
                        // }

                    }else{
                        alert('歌曲名字不能为空')
                    }

                }
            }
        </script>
    </body>
</html>